<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360开关机动画</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        #box {
            position: absolute;
            right: 193px;
            bottom: 220px;
        }
        
        #hd,
        #bd {
            position: absolute;
        }
        
        #bd {
            margin-top: 154px;
        }
        
        #clock {
            position: absolute;
            width: 193px;
            height: 20px;
            z-index: 2;
        }
    </style>
</head>

<body>
    <div id="box">
        <span id="clock"></span>
        <div id="hd">
            <img src="img/11-2-1.png" alt="">
        </div>
        <div id="bd">
            <img src="img/11-2-2.png" alt="">
        </div>
    </div>
    <script>
        $(function() {
            $("#clock").click(function() {
                $("#bd").animate({
                    height: 0
                }, 500, function() {
                    $("#box").animate({
                        width: 0
                    }, 1000)
                });
            })
        })
    </script>
</body>

</html>